<template>
    <div class="about">
        <Header/>
        <div class="second_show">
            <div class="img" style=""></div>
            <div class="pages_w1470" v-if="menudatalist">
                <div class="second_show_text about fl-clr" >
                    <div class="second-title">
                        <p class="en">{{menudata.alias}}</p>
                        <p class="cn">{{menudata.name}}</p>
                    </div>
                    <div class="text">
                        <p><img src="../assets/images/icon/about.svg"></p><br>
                        <div v-html="menudata.content"></div>
                    </div>
                </div>
            </div>
            <i class="tips"></i>
        </div>
        <div class="second_box" v-if="menudatalist">
            <img src="../assets/images/s2.png" class="about-company-list-0">
            <div class="pages_w1470">
                <ul  class="ul about-img-list fl-clr opacityli"
                    data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[0].data" :key="index" v-show="index<4">
                        <div class="box scale">
                            <img :src="$store.state.domain+item.pic">
                            <div class="title">
                                <p class="cn">{{item.name}}</p>
                                <p class="en">{{item.alias}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="second_box" v-if="menudatalist">
            <img src="../assets/images/l_j.png" class="about-company-list-l">
            <div class="pages_w1470">
                <div class="second-title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].alias}}</p>
                    <p class="cn">{{menudatalist[1].name}}</p>
                </div>

                <ul class="ul about-company-list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[1].data" :key="index" v-show="index<4">
                        <div class="box">
                            <img :src="$store.state.domain+item.pic">
                            <p class="subtitle">业务范围：</p>
                            <div class="txt">{{item.alias}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="second_box" v-if="menudatalist">
            <div class="pages_w1470">
                <div class="second-title align-r opacity ryzs" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[2].alias}}</p>
                    <p class="cn">{{menudatalist[2].name}}</p>
                </div>

                <!--<ul class="ul about-honor-list fl-clr opacityli"
                    data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[2].data" :key="index" v-show="index<4">
                        <div class="box"><img :src="$store.state.domain+item.pic"></div>
                    </li>
                </ul>-->
                <div class="about-honor-swiper opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <swiper :options="swiperAboutHonor" :auto-destroy="false">
                        <swiper-slide  v-for="(item,index) in menudatalist[2].data" :key="index" v-show="index<4">
                            <img :src="$store.state.domain+item.pic">
                        </swiper-slide>
                    </swiper>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>
            </div>
        </div>

        <div class="contact-box fl-clr" v-if="menudatalist">
            <img src="../assets/images/r_j.png" class="about-company-list-2">
            <img src="../assets/images/r_j.png" class="about-company-list-3">
            <div class="box">
                <div class="dituContent" id="dituContent">
                    <baidu-map class="map" :center="{lng: 116.70800 , lat:40.37455}" :zoom="15" style="height: 100%">
                        <bm-marker :position="{lng: 116.70800 , lat: 40.37455}" :dragging="true" @click="infoWindowOpen">
                            <bm-info-window title="科拓恒通生物技术股份有限公司" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
                                <p v-text="infoWindow.contents"></p>
                            </bm-info-window>
                        </bm-marker>
                    </baidu-map>
                </div>

            </div>
            <div class="box">
                <div class="pa">
                    <div class="second-title">
                        <p class="en">CONTACT</p>
                        <p class="cn">联系科拓</p>
                    </div>
                    <div class="txt fl-clr">
                        <span class="w"><i class="icon icon-location"></i>{{menulistconfig[3].name}}</span>
                        <span><i class="icon icon-phone"></i>{{menulistconfig[4].name}}</span>
                        <span><i class="icon icon-mail"></i>{{menulistconfig[5].name}}</span>
                        <span><i class="icon icon-fax"></i>010-69667381</span>
                        <span><i class="icon icon-web"></i>www.scitop.cn</span>
                    </div>
                </div>
            </div>
        </div>


        <Footer/>

    </div>
</template>



<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            infoWindow: {
                show: true,
                contents: '北京市怀柔区雁栖经济开发区牤牛河路31号'
            },
            swiperAboutHonor:{
                //loop: true,
                slidesPerView:4,
                spaceBetween:70,
                breakpoints:{
                    750:{
                        slidesPerView:4,
                        spaceBetween:70
                    },
                    320:{
                         slidesPerView:1,
                         spaceBetween:20
                    }
                }
            }
        }
    },
    computed: {

        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(1)).length>100){
                return this.$store.getters.getmenudata(1)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(1)).length>100){
                return this.$store.getters.getmenudatalist(1)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        },
    },
    methods: {
        infoWindowClose () {
            this.infoWindow.show = false
        },
        infoWindowOpen () {
            this.infoWindow.show = true
        },
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
    }
}
</script>
